<template>
  <div>
    <!--标题栏组件-->
    <nav-bar>
      <template v-slot:title>商品分类</template>
    </nav-bar>
    <div id="maxbox">
      <!-- 导航栏 -->
      <div class="cate-tab">
        <!-- 标签页 -->
        <div>
          <van-tabs v-model="activekey" @click="tabClick">
            <van-tab title="销量排序"></van-tab>
            <van-tab title="价格排序"></van-tab>
            <van-tab title="评论排序"></van-tab>
          </van-tabs>
        </div>
      </div>
      <!-- 内容区 -->
      <!-- 折叠菜单 -->
      <van-sidebar class="leftmenu" v-model="active">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item
            v-for="(item, index) in categories"
            :key="index"
            :title="item.name"
            :name="index"
          >
            <div v-for="items in item.children" :key="items.id">
              <van-sidebar-item
                :title="items.name"
                @click="getGoods(items.id)"
              />
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>

      <!-- 商品展示 -->
      <div class="goodslist wrapper">
        <div class="content">
          <div
            @click="itemClick(item.id)"
            v-for="item in showGoods"
            :key="item.id"
          >
            <van-card
              :num="item.sales"
              :price="item.price"
              :desc="item.description"
              :title="item.title"
              :thumb="item.cover_url"
            />
          </div>
        </div>
      </div>
    </div>
    <back-top v-show="isShowTop" @bTop="backTop"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/NavBar.vue";
import { computed, nextTick, onMounted, reactive, ref, watchEffect } from "vue";
//请求数据的结束文件
import { getCateData, getOrder } from "network/category.js";
//屏幕滚动的插件
import BScroll from "better-scroll";
//返回顶部按钮
import BackTop from "components/common/backtop/BackTop.vue";
import { useRouter } from "vue-router";
export default {
  name: "CategoryView",
  components: { NavBar, BackTop },
  setup() {
    let active = ref(0);
    let activekey = ref(0);
    let activeName = ref("1");
    //存放折叠菜单的数据
    let categories = ref([]);
    //默认当前的排序条件
    let currentOrder = ref("sales");
    //默认的分类id
    let currentCid = ref(0);
    //显示返回顶部按钮
    let isShowTop = ref(false);
    //路由
    const router = useRouter();
    //排序数据模型：
    let goods = reactive({
      sales: { page: 1, list: [] },
      price: { page: 1, list: [] },
      comments_count: { page: 1, list: [] },
    });
    let bscroll = reactive({});
    //显示数据
    const showGoods = computed(() => {
      return goods[currentOrder.value].list;
    });
    //显示返回顶部按钮：

    //获取折叠菜单的元素
    onMounted(() => {
      getCateData().then((res) => {
        categories.value = res.categories;
      });
      init();
      //创建屏幕滚动的对象

      bscroll = new BScroll(document.querySelector(".goodslist"), {
        probeType: 3, //0,1,2,3
        click: true, //是否允许鼠标点击
        pullUpLoad: true, // 上拉加载更多
      });
      bscroll.on("scroll", (position) => {
        isShowTop.value = -position.y > 300;
      });
      //上拉加载数据，触发pullingUp
      bscroll.on("pullingUp", () => {
        const page = goods[currentOrder.value].page + 1;
        getOrder("sales", currentCid.value, page).then((res) => {
          goods[currentOrder.value].list.push(...res.goods.data);
          goods[currentOrder.value].page += 1;
          nextTick(() => {
            //重新计算高度
            bscroll & bscroll.refresh();
          });
        });
        //完成上拉，等数据请求完成，要将数据展示出来
        bscroll.finishPullUp();

        //重新计算高度
        bscroll.refresh();
      });
    });
    //排序选项卡
    const tabClick = (index) => {
      let orders = ["sales", "price", "comments_count"];
      currentOrder.value = orders[index];
      getOrder(currentOrder.value, currentCid.value).then((res) => {
        goods[currentOrder.value].list = res.goods.data;
      });
      init();
      console.log("当前分类id:" + currentCid.value);
      console.log("当前排列序号：" + currentOrder.value);
    };
    //分类排序
    const getGoods = (cid) => {
      currentCid.value = cid;
      console.log("当前分类id:" + currentCid.value);
      console.log("当前排列序号：" + currentOrder.value);
    };
    //获取分类数据
    const init = () => {
      getOrder("sales", currentCid.value).then((res) => {
        goods.sales.list = res.goods.data;
        nextTick(() => {
          //重新计算高度
          bscroll & bscroll.refresh();
        });
      });
    };
    //监听高度的变化重新加载
    watchEffect(() => {
      nextTick(() => {
        //重新计算高度
        bscroll & bscroll.refresh();
      });
    });
    //返回顶部的方法
    const backTop = () => {
      bscroll.scrollTo(0, 0, 300);
    };
    return {
      active,
      activeName,
      categories,
      tabClick,
      currentOrder,
      getGoods,
      currentCid,
      showGoods,
      activekey,
      bscroll,
      isShowTop,
      backTop,
      itemClick: (id) => {
        router.push({
          path: "/detail",
          query: {
            id: id,
          },
        });
      },
    };
  },
};
</script>

<style scoped>
#maxbox {
  margin-top: 45px;
}
#maxbox > .cate-tab {
  position: fixed;

  float: right;
  height: 50px;
  top: 45px;
  right: 0px;
  left: 130px;
  z-index: 9;
}
#maxbox > .leftmenu {
  position: fixed;
  top: 95px;
  left: 0;
  width: 35%;
}
#maxbox > .goodslist {
  text-align: left;
  position: absolute;
  top: 95px;
  right: 0px;
  height: 500px;
  flex: 1;
  width: 65%;
  padding: 10px;
}
.van-card__thumb {
  width: 68px !important;
}
</style>